<template>
    <div>

        <div :class="class" class="selfselect" ref="showPanelOne">
            <div>
                <Input
                :placeholder="placeholder"
                v-model="readvalue"
                readonly="true"
                @mouseup="clickDown"
                >
                    <template #suffix v-if="showdown">
                        <Icon type="ios-arrow-down" />
                    </template>
                    <template #suffix v-else-if="!showdown">
                        <Icon type="ios-arrow-up" />
                    </template>
                </Input>
            </div>
            <div v-if="showList" class="sel-options-box sel-select-dropdown" style="min-width:150px;max-width: 230px;" :style="vstyle">
                <!-- 搜索输入 -->
                <Input 
                ref="inAutofocus"
                class="sel-search"
                placeholder="搜索内容"
                v-model="choosevalue"
                @on-change="changeValue"
                @on-keydown="chooseItem"
                @on-enter="selectOption"
                >
                    <template #prefix>
                        <Icon type="ios-search" />
                    </template>
                </Input>
                <!-- 全选按钮 -->
                <div style="max-height:200px;overflow:auto" ref="selop" class="select-option-box">
                    <ul class="select-option" >
                            <li 
                            @click="checkItemOptionChange(item)"
                            class="sel-options-li"
                            v-for="(item,index) in options" 
                            :key="index" 
                            :data-index="index"
                            >
                            {{item.label}}
                            </li>
                    </ul>
                </div>
                <div class="text-right margin-bottom-5" style="border-top:1px solid #ddd">
                    <Button class="sel-btn pull-left margin-top-5" @click="clearAll">清空选项</Button>
                    <Button class="sel-btn margin-right-5" @click="cancel">取消</Button>
                    <Button class="sel-btn" type="primary" @click="confirm">确定</Button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            // 下拉选项
            options: {
                type: Array,
                default: () => []
            },
            vstyle:String,
            class:String,
            placeholder:String,
            modelValue:Object,
        },
        data(){
            return {
                readvalue: '', 
                showdown:true,
                showList:false,
                choosevalue:'',
                itemHoverIndex:0,
                aavalue:'',
            }
        },
        mounted(){
            // document.addEventListener('click', (e) => {
            //     let isSelf = this.$refs.showPanelOne.contains(e.target)
            //     if (!isSelf) {
            //         this.showdown = true;
            //         this.showList = false;
            //     }
            // })
        },
        methods:{
            clearAll(){
                this.readvalue= ''; 
                this.showdown=true;
                this.showList=false;
                this.choosevalue='';
            },
            clickDown(){
                this.showdown = !this.showdown;
                this.showList = !this.showList;
                if(this.showList){
                    setTimeout(() => {
                        this.$refs.inAutofocus.focus()
                    }, 10);
                }
            },
            changeValue(){
                this.options = this.options.filter(item=>{
                    return item.label.toLowerCase().includes(this.choosevalue.toLowerCase())
                })
            },
            chooseItem(){
                if(this.options.length === 0) return;
                // if(!hasFocusOption){
                if(event.keyCode === 40){
                    this.itemHoverIndex++;
                    // 重新回到第一个
                    if(this.itemHoverIndex === this.options.length){
                        this.itemHoverIndex = 0
                    }
                    // 超过当前的高度就开始滚动
                    if((this.itemHoverIndex+1)*32>=document.querySelector('.select-option-box').scrollTop+200){
                        document.querySelector('.select-option-box').scrollTop = (this.itemHoverIndex+1)*32-200
                    }else if(this.itemHoverIndex === 0) document.querySelector('.select-option-box').scrollTop = 0
                }else if(event.keyCode === 38){
                    this.itemHoverIndex--;
                    if(this.itemHoverIndex<0){
                        this.itemHoverIndex = this.options.length-1
                    }
                    if((this.itemHoverIndex+1)*32-32<=document.querySelector('.select-option-box').scrollTop){
                        document.querySelector('.select-option-box').scrollTop = (this.itemHoverIndex+1)*32-32
                    }else if(this.itemHoverIndex === this.options.length-1){
                        document.querySelector('.select-option-box').scrollTop = (this.itemHoverIndex+1)*32-200
                    }
                }

                // 整个下拉加入class
                let optionItems = this.$refs.selop.querySelectorAll('.sel-options-li');
                optionItems.forEach((item,index)=>{
                    item.classList.remove('activeOption')
                    if(index===this.itemHoverIndex) item.classList.add('activeOption')
                })
            },
            selectOption(){
                this.aavalue = this.options[this.itemHoverIndex-1]
            },
            checkItemOptionChange(data){
                this.aavalue = data;

            },
            confirm(){
                // this.readvalue = 
                console.log(this.aavalue)
            },
            cancel(){

            }
        }
    }
</script>